<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('支付宝生活号')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_locations('支付宝生活号', '消息管理', '编辑信息')"></div>
		
		<div class="layui-row  yy-margin-top-10">
		
			<fieldset>
				<legend><a>基本信息</a></legend>
			
				<form class="layui-form" action="/message/saveuser" method="post">
				<!-- 查询 -->
					<div class="layui-colla-item">
						<div class="layui-form layui-form-pane">
							<input type="hidden" name="id" th:value="${message.id}">
							
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">消息类型</label>
								<div class="layui-input-inline">
									<input type="radio" name="type" th:disabled="${message.id ne '-1'} ? true" lay-filter="type" title="文本消息" value="1" th:checked="${ (message.type eq '1') or ( message.type ne '1' and message.type ne '2' )}" />
									<input type="radio" name="type" th:disabled="${message.id ne '-1'} ? true" lay-filter="type" title="图文消息" value="2" th:checked="${message.type eq '2'}" />
								</div>
							</div>
							
							<div class="layui-form-item" msgType="1">
								<label class="layui-form-label layui-bg-orange">消息内容</label>
								<div class="layui-input-block">
									<textarea name="content" th:text="${message.content}" autocomplete="off" placeholder="请输入消息内容" class="layui-textarea" lay-verify="required" maxlength="50"></textarea>
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图文标题</label>
								<div class="layui-input-block">
									<input th:value="${message.title}" name="title" autocomplete="off" class="layui-input" lay-verify="required" maxlength="10" placeholder="请输入图文消息标题">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">链接地址</label>
								<div class="layui-input-block">
									<input th:value="${message.url}" name="url" autocomplete="off" class="layui-input" maxlength="200" lay-verify="url" placeholder="请输入图文消息链接地址">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">链接描述</label>
								<div class="layui-input-block">
									<input th:value="${message.action_name}" name="action_name" autocomplete="off" class="layui-input" maxlength="10" placeholder="请输入图文消息链接描述">
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图文描述</label>
								<div class="layui-input-block">
									<textarea name="desc" th:text="${message.desc}" autocomplete="off" placeholder="请输入图文消息描述" class="layui-textarea" maxlength="50"></textarea>
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">图片</label>
								<div class="layui-input-block">
									<input type="hidden" name="image_url" autocomplete="off" th:value="${message.image_url}">
									<img style="width: 540px;height: 270px;" th:src="@{${message.image_url eq null} ? '/images/default/message_default.png' : ${message.image_url}}" id="imageUrl"/>
								</div>
							</div>
							
							<div class="layui-form-item" msgType="2">
								<label class="layui-form-label layui-bg-orange">上传</label>
								<div class="layui-input-block">
									<div class="layui-upload-drag" id="imgMsg">
										<i class="layui-icon"></i>
										<p>点击上传，或将文件拖拽到此处</p>
										<div class="layui-form-mid layui-word-aux">建议：建议尺寸 900 x 500px，支持 .jpg .jpeg .png 格式，小于31，不符合比例的图片显示时将会被部分切割</div>
									</div>
								</div>
							</div>
							
							<!-- 提交及取消按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<a class="layui-btn yy-float-right yy-margin-right-10" lay-submit="" lay-filter="message">确定</a>
									<a class="layui-btn yy-float-right" href="javascript:history.go(-1);">返回</a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
		</div>
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script type="text/javascript">
	/*<![CDATA[*/
	//显示文本消息相关输入框
	function showTextMsgInput(){
		//移除掉图片标题文本框的必添属性 
		$("input[name=title]").attr("lay-verify", "");
		//文本消息文本框增加必添属性
		$("textarea[name=content]").attr("lay-verify", "required");
		//文本消息，去掉连接地址的验证
		$("input[name=url]").attr("lay-verify", "");
		$("div[msgType=1]").each(function(){
			$(this).show();
		});
		$("div[msgType=2]").each(function(){
			$(this).hide();
		});
	}
	
	//显示图文消息相关输入框
	function showImgMsgInput(){
		//移除掉文本消息文本框的必添属性 
		$.logs.info($("textarea[name=content]"));
		$("textarea[name=content]").attr("lay-verify", "");
		//图文消息标题文本框增加必添属性
		$("input[name=title]").attr("lay-verify", "required");
		//图文消息，加上连接地址的验证
		$("input[name=url]").attr("lay-verify", "url");
		$("div[msgType=1]").each(function(){
			$(this).hide();
		});
		$("div[msgType=2]").each(function(){
			$(this).show();
		});
	}
		
	;!function(){
		//默认显示文本消息的内容
		var id = $("input[name=id]").val();
		if(id == -1){//说明是增加，默认显示文本消息内容
			showTextMsgInput();
		} else {//修改
			//1.判断修改的类型是什么，然后判断显示那些内容
			var type = $("input[name=type]:checked").val();
			if(type == 1){
				showTextMsgInput();//文本消息 
			} else {
				showImgMsgInput();//图文消息
			}
		}
		
		
		
		//初始化副文本编辑器
		var form = layui.form, laydate = layui.laydate, upload = layui.upload;
		
		//切换消息类型时，隐藏显示需要添加的相应信息
		form.on('radio(type)', function(data){
			// 1.文本消息 2.图文消息
			var type = data.value;
			if(type == 1){
				showTextMsgInput();
			} else {
				showImgMsgInput();//图文消息
			}
		}); 
		
		//文件上传
		upload.render({
			elem:"#imgMsg",
			url:"/images/uploadimage",
			accept:'images',
			method:"post",
			auto:true,
			field:"file",
			size:"1024",
			drag:true,
			done:function(res, index, upload){
				$.logs.info(res);
				var src = res.data.src;
				$("#imageUrl").attr("src", src);
				$("input[name=imageUrl]").val(src);
			},
			error:function(index, upload){
				$.logs.info(index);
				$.logs.info(upload);
			}
		});
		
		//表单提交事件
		form.on('submit(message)', function(data){
			$.http.submitForm({
				url:"/message/savemessage",
				data:data.field,
				success:function(r){
					if(r && r.success){
						$.prompt.alert(r.msg, "/message/messageList");
					} else {
						$.prompt.alert(r.msg, null);
					}
				}
			});
			
			return false; //阻止表单跳转。因为使用ajax所以这里阻止表单的自动跳转
		});
		
	}();
	
	/*]]>*/
	</script>
</body>

</html>